<template>
  <footer class="footerWrapper">
    <div class="container-x-suit">
      <div class="container-x-p">
        <div class="content">
          <!-- <div class="item">
            <h3 class="company wr">深圳市虎匠科技投资发展有限公司</h3>
          </div> -->
          <div class="item" style="text-align: center;flex: 2;">
            <join
              class="ul-link"
              join="|"
              :list="['联系我们', '网站地图', '隐私政策', '法律声明']" />
          </div>
          <div class="item QRcodeList">
            <!-- <div class="QRcode Q1"></div> -->
            <div class="QRcode Q2"></div>
          </div>
        </div>
        <!-- <div class="bottom">
          <h3 class="item wr">版权所有：深圳市虎匠科技投资发展有限公司</h3>
          <el-tooltip effect="dark" content="地址：深圳市龙岗区坂田街道雪象社区" placement="top-start">
            <h3 class="item wr" style="flex: 2;">地址：深圳市龙岗区坂田街道雪象社区</h3>
          </el-tooltip>
        </div> -->
      </div>
    </div>
  </footer>
</template>

<script>
import Join from '@/base/join/join'

export default {
  name: 'MFooter',
  components: {
    Join
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

.footerWrapper
  border-top: 5px solid rgba(255, 255, 255, .5)
  background: $color-theme requireImg('background-footer.png')
  box-sizing: border-box
  .container-x-p
    padding: 0 20px
    .content
      // min-height: 215px
      min-height: 170px
      flex-direction: row
      display: flex
      color: #FFF
      font-size: 11px
      // border-bottom: 1px solid #FFF
      box-sizing: border-box
      &>.item
        flex: 1
      .ul-link
        display: inline-block
        flex: 1
        padding: 10px 0
        font-size: 16px
      h3.company
        flex: 1
        padding: 10px 0
      .QRcodeList
        padding: 10px 0
        display: flex
        justify-content: center
      .QRcode
        margin: 0 10px
        width: 145px
        height: @width
        background-color: #FFF
        &.Q1
          background: requireImg('QRcode1.png') center center no-repeat
          background-size: 100% 100%
        &.Q2
          background: requireImg('QRcode2.jpg') center center no-repeat
          background-size: 100% 100%
  .bottom
    line-height: 50px
    display: flex
    color: #FFF
    font-size: 11px
    .item
      flex: 1
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

@media (max-width: $media-smail)
  .content
    text-align: center
    flex-direction: column !important
  .bottom
    text-align: center
    flex-direction: column !important
</style>
